<template>
	<view class="home-main">
		<uni-nav-bar class="head-nav" fixed :backgroundColor="headColor">
			<view class="title">
				<text class="nav-item" :class="{active:show==1}" @tap="show=1">推荐</text>
				<text class="nav-item" :class="{active:show==2}" @tap="show=2">品牌</text>
			</view>
			<view slot="left">
				<image class="icon icon-chat" src="../../static/icons/chat.png" mode=""></image>
			</view>
			<view slot="right" class="head-nav-right">
				<navigator class="nav-search" url="/pages/cart/index">
					<image src="../../static/icons/search.png" class="icon icon-search"></image>
				</navigator>
				<navigator class="nav-cart" url="/pages/buyCart/index">
					<image class="icon icon-cart" src="../../static/icons/cart.png"></image>
				</navigator>
			</view>
		</uni-nav-bar>
		<view v-show="show==1" class="section-home">
			<view class="section-banner">
				<swiper class="swiper-banner" :indicator-dots="true" :autoplay="true" :duration="400">
					<swiper-item v-for="m in bannerList" :key="m.id">
						<view class="swiper-item uni-bg-red">
							<image class="img" :src="m.img_url" mode="scaleToFill"></image>
						</view>
					</swiper-item>
				</swiper>
				<!-- 系列 -->
				<view class="section-series">
					<view class="common-title">
						<text class="title">品类推荐</text>
						<text class="more" @tap="seriesMore">更多></text>
					</view>
					<scroll-view class="scroll-series" scroll-x="true">
						<view @tap="goSeries(item.id)" class="series-block" v-for="item in series" :key="item.id">
							<image class="image" :src="item.cover_img" mode=""></image>
							<view class="cname">{{item.cname}}</view>
							<view class="ename">{{item.ename}}</view>
						</view>
					</scroll-view>
				</view>
				<!-- 特色优选 -->
				<view class="section-hot">
					<view class="common-title">
						<text class="title">特色优选</text>
					</view>
					<swiper class="swiper" previous-margin="80rpx" next-margin="30rpx">
						<swiper-item class="hot-swiper-item" v-for="item in hotList" :key="item.id">
							<navigator class="swiper-item" :url="'/pages/kind/detail/index?productId='+item.id">
								<image class="image" :src="item.cover_img" mode=""></image>
								<view class="inner-card">
									<view class="info">
										<view class="gname">{{item.gname}}</view>
										<view class="sub-gname">{{item.detail_desc}}</view>
										<view class="dotts">
											<span class="dott" v-for="color in item.colors" :key="color" :style="{backgroundColor:color}"></span>
										</view>
										<view class="descr">{{item.descr}}</view>
									</view>
								</view>
							</navigator>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view v-show="show==2" class="section-brand">
			<Brands :brandList="brandList"></Brands>
		</view>
	</view>
</template>

<script>
	import homeApi from '@/api/home'
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import Brands from './brand/index.vue'
	import findApi from '../../api/find/index.js'
	export default {
		components: {
			uniNavBar,Brands
		},
		data() {
			return {
				show: 1,
				bannerList: [],
				brandList:[],
				series: [],
				hotList: []
			}
		},
		created() {
			this.getBanners();
			this.getSeriesAll();
			this.getHotList();
			this.getBrandList();
		},
		methods: {
			async getBanners() {
				let {
					data
				} = await homeApi.bannerList({
					//首页轮播 use类型必须 而且为0
					use: 0
				});
				this.bannerList = data;
			},
			async getBrandList(){
				let {data} = await homeApi.brandList();
				this.brandList = data;
			},
			getSeriesAll() {
				findApi.seriesAll()
					.then(res => {
						this.series = res.data
					})
			},
			seriesMore() {
				uni.switchTab({
					url: '../find/index'
				})
			},
			goSeries(id) {
				//页面在PC端存在问题，可针对其进行处理
				// #ifdef H5
				window.id = id;
				// #endif
				uni.reLaunch({
					url: '../find/index?id=' + id
				})
			},
			getHotList() {
				homeApi.hotList()
					.then(res => {
						this.hotList = res.data;
					})
			}
		},
		computed: {
			//选中第一张为透明色,第二张为设定的颜色
			headColor() {
				return this.show == 1 ? 'transparent' : '#354E44';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-main {
		.head-nav {
			background-color: $leju-base-color;
			background-color: transparent;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 999;
			border-bottom: none;
			/deep/.uni-navbar--border{
				border-bottom: none;
			}
			.title {
				width: 100%;
				display: flex;
				justify-content: center;

				.nav-item {
					font-size: 32rpx;
					color: #fff;
					line-height: 45rpx;
					margin: 0 20rpx;
					padding-bottom: 12rpx;

					&.active {
						border-bottom: 2px solid #fff;
					}
				}
			}

			.icon {
				width: 36rpx;
				height: 36rpx;

				&.icon-chat {
					margin-left: 20rpx;
				}

				&.icon-search {
					margin-right: 40rpx;
				}
			}

			.head-nav-right {
				display: flex;
				justify-content: space-between;
				align-items: center;
				image,
				img {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.common-title {
			font-size: 32rpx;
			color: #3E3E3E;
			line-height: 44rpx;
			margin: 40rpx auto;
			box-sizing: border-box;
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				font-weight: 600;
			}

			.more {
				font-size: 26rpx;
				color: #8C8C8C;
			}
		}

		.section-banner {
			width: 100%;
			height: 470rpx;

			.top-bar {
				width: 100%;
				height: 88rpx;
				background-color: green;
			}

			.swiper-banner {
				width: 100%;
				height: 470rpx;

				.swiper-item {
					width: 750rpx;
					height: 100%;

					.img {
						width: 100%;
						height: 100%;
					}
				}
			}

			.section-series {
				width: 100%;

				.scroll-series {
					width: 100%;
					white-space: nowrap; //规定段落中的文本不进行换行：

					.series-block {
						display: inline-block;
						margin: 0 20rpx;
						width: 208rpx;

						.image {
							width: 208rpx;
							height: 176rpx;
						}

						.cname {
							font-size: 26rpx;
							line-height: 38rpx;
							color: #3E3E3E;
							text-align: center;
							margin-top: 20rpx;
							font-weight: 600;
						}

						.ename {
							font-size: 20rpx;
							color: #B0B0B0;
							line-height: 28rpx;
							text-align: center;
						}
					}
				}
			}

			.section-hot {
				margin-bottom: 200rpx;

				.swiper {
					width: 100%;
					height: 314rpx;

					.hot-swiper-item {
						position: relative;
						width: 590rpx;
						height: 314rpx;

						.image {
							position: absolute;
							left: 44rpx;
							top: 0;
							width: 194rpx;
							height: 280rpx;
							border-radius: 10rpx;
						}

						.inner-card {
							margin-top: 50rpx;
							width: 590rpx;
							height: 260rpx;
							background-color: #fff;
							border-radius: 20rpx;

							.info {
								width: 316rpx;
								height: 100%;
								box-sizing: border-box;
								padding: 36rpx;
								margin-left: 274rpx;

								.gname {
									font-size: 26rpx;
									line-height: 38rpx;
									font-weight: 600;
								}

								.sub-gname {
									white-space: nowrap;
									overflow: hidden;
									font-size: 18rpx;
									color: #B0B0B0;
									line-height: 36rpx;
								}

								.dotts {
									width: 100%;
									height: 40rpx;
									display: flex;
									justify-content: flex-start;
									align-items: center;

									.dott {
										width: 20rpx;
										height: 20rpx;
										border-radius: 50%;
										margin-right: 16rpx;
									}
								}

								.descr {
									font-size: 22rpx;
									line-height: 30rpx;
									margin-top: 12rpx;
									white-space: nowrap;
									overflow: hidden;
								}
							}
						}


					}
				}
			}
		}
		.section-brand{
			margin-top: 100rpx;
		}
	}
</style>
